<template>
	<view class="guarantee">
		<view class="guar-wrap" v-show="showFlag" style="padding: 10px;">
			<view class="guar-back-w u-border-top u-p-40 u-p-r-30 u-p-l-30 u-font-40"
				style="font-weight: 700;display: flex; align-items: center;">
				<i></i>
				<image style="width: 46rpx;height: 46rpx;margin-right: 20rpx;" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/report2.png"
					mode=""></image>
				<view>{{name}}-{{address}}</view>
			</view>
			<view class="u-border-top u-p-20 u-p-r-30 u-p-l-30 ">
				<view class="u-font-32" style="display: flex;" required>
					<text style="color: red">*</text>报修类型：
					<view style="margin-left: auto;display: flex;">
						<view @click="handleSelect" style="display: contents;color: #2b85e4;" v-if="activeName==null">
							选择报修类型</view>
						<view @click="handleSelect" style="display: contents;color: #2b85e4;" v-else>{{activeName}}
						</view>
						<view>
							<image :src="typeStatus == true ? downImg:flatImg" :style="typeStatus == true ?'width: 15px;height:15px;margin-top: -1px;margin-left: 2px;': 
									'width: 8px;height:8px;margin-top: 2px;margin-left: 9px;'" alt="">
						</view>
					</view>
				</view>
				<view v-if="typeStatus" class="u-m-t-34 u-flex u-flex-wrap">
					<view v-for="(item,index) in classList" :key='index' style="margin:5px 10px;" class="guar-class-box"
						:class="activeNum==index?'guar-class-box-active':''" @click="activeEvent(index,item.id);">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="guar-back-f"></view>
			<view @click="timeChag" class="u-p-30 u-font-32 repair-time-box">
				<view >
					<text style="color: red">*</text>预约维修时间：
				</view>
				<view >
					<view v-show="point">
						<span style="color: #999;">立即上门</span>
						<image :src="flatImg" class="repair-time" ></image>
					</view>
					<u-select v-model="isDoor" mode="mutil-column-auto" :list="doorList" @confirm="confirm"></u-select>
					<view>
						{{visitTimeList.length>0 ? visitTimeList[0].label +' '+visitTimeList[1].label:'' }}
					</view>
				</view>
			</view>
			<view class="guar-back-f"></view>
			<view class="u-p-20 u-p-l-30 u-p-r-30">
				<view class="u-m-b-20 u-font-32">
					<text style="color: red">*</text>报修说明：
				</view>
				<view class='guar-text' style="border: 1px solid #c4c4c4;border-radius: 10rpx;">
					<textarea maxlength='-1' v-model="guaranList.repairs_info" type="textarea"
						placeholder="为了提供更好的服务，请详细描述报修情况!" />
				</view>
			</view>
			
			<view class="u-p-20 u-p-l-30 u-p-r-30">
				<view class="u-m-b-20 u-font-32" style="display: flex;">
					<view @click="uoloadHouse" v-if="guaranList.repairs_picture.length<3"
						style="color: blue;display: flex; align-items: center;">
						<image style="width: 20px;height: 18px;margin-right: 3px;margin-top: 1px;"
							src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/uploading.png" mode=""></image>
						<view>点击上传要维修的图片</view>
					</view>
				</view>

				<view class="guarn-box guarn-box2 u-m-t-20" v-if="guaranList.repairs_picture.length!=0">
					<view class="guarn-box2-img" v-for="(item,index) in guaranList.repairs_picture" :key='index'>
						<image mode="aspectFill" style="border-radius: 5px;" :src="item"></image>
						<u-icon @click="colseImg(index)" name="close" color="red" size="40"
							class="guarn-box2-img-close"></u-icon>
					</view>
				</view>
				<view class="guarn-box-txt u-m-t-20">
					<view class="u-font-24 u-m-b-10">
						提示：请上传清晰的照片,以便解决报修问题,最多上传3张照片
					</view>
				</view>
			</view>

		</view>
		<view class="u-font-26 u-p-t-60 u-p-b-30 u-p-l-50" style="width: 100%;display: flex;">
			<u-checkbox active-color="#43AF00" shape="circle" v-model="radio">报修申请需要同意</u-checkbox>
			<view @click="toMent" style="color: rgb(65, 117, 5);line-height: 35px;">《维修协议》</view>
			<view class="post_text" @click="skip1">
				<view>公区报修</view>
			</view>
		</view>
		<view class="bill-deta-btn" @click="guaranBtn">
			<button class="yilingqu">提交报修申请</button>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tool.js'
	import LbPicker from '@/components/lb-picker'
	export default {
		components: {
			LbPicker
		},
		data() {
			return {
				doorList:[],
				visitTimeList:[],
				doorList1:[
					{
					    "value": "2024-5-13",
					    "label": "2024-5-13",
					    "children": [
					        {
					            "value": "9:00~12:00",
					            "label": "9:00~12:00",
					        },
					        {
					            "value": "13:00~18:00",
					            "label": "13:00~18:00"
					        },
					        {
					            
					            "value": "18:00~22:00",
					            "label": "18:00~22:00"
					        }
					    ]
					}
				],
				isDoor:false,
				value: '',
				activeNum: -1,
				activeName: null,
				show: false,
				list: [],
				showFlag: false,
				homelist: null,
				name: null,
				address: null,
				classList: [],
				guaranList: {
					mobile: null,
					maintain_type: null,
					room_id: null,
					repairs_appointment_time: null,
					repairs_info: null,
					repairs_picture: [],
					pro_id: null,
					typeStatus:'',
				},
				imgFlag: true,
				typeStatus: false, //保修类型展示状态
				point: true,
				flatImg: 'https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/right.png',
				downImg: 'https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/down.png',
				radio: false
			}
		},
		onShow() {
			// this.getPayList()
			let _this = this
			if (uni.getStorageSync('phone')) {
				if (uni.getStorageSync('loginFlag')) {
					if (!uni.getStorageSync('hourseList')) {
						uni.showModal({
							title: '请先进行业主认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/my/address/address'
									})
								}
							}
						});
						this.$openInvite()
					} else {
						_this.guaranList.mobile = uni.getStorageSync('phone')
						_this.showFlag = true
						_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
						_this.name = _this.homelist.proName;
						_this.address = _this.homelist.buildDistrictCode + '-' + _this.homelist.buildTowerCode + '-' +
							_this.homelist.roomUnitNumber + '-' + _this.homelist.roomCode
						_this.guaranList.room_id = _this.homelist.roomId
						_this.guaranList.pro_id = _this.homelist.proId

						_this.getRepaireClass()
					}
				} else {
					uni.showModal({
						title: '请先实名认证',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								_this.$Router.push({
									path: '/homePage1/realName/realName'
								})
							}
						}
					});
				}
			} else {
				uni.showModal({
					title: '请先登录',
					showCancel: false,
					confirmText: '确认',
					confirmColor: '#F9A832',
					success: function(res) {
						if (res.confirm) {
							console.log('a')
							_this.$Router.pushTab({
								path: '/pages/user/user'
							})
						}
					}
				});
			}
		},
		mounted() {
			//默认为 wgs84 返回 gps 坐标，gcj02 返回国测局坐标
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
				}
			});
		},
		methods: {
			//
			handleSelect() {
				var flag = this.typeStatus
				this.classList.forEach(row => {
					this.typeStatus = false
				})
				this.typeStatus = flag ? false : true;
				console.log("this.typeStatus", this.typeStatus);
			},
			// 获取报修类型
			getRepaireClass() {
				this.$request.api.repaireClass({}).then(res => {
					if (res.data.status == 200) {
						this.classList = res.data.data
						console.log(this.classList)
					}
				});
			},
			// 选择时间
			timeChag() {
				//this.$refs.addRef.show();
				// const childComponent = this.selectComponent('.showTime');
				// childComponent.show();
				//this.showPicker = true;
				this.isDoor = true;
				this.list = [{}, {}, {}, {}, {}, {}, {}]
				let hours = new Date().getHours()
				let time = new Date().getTime()
				if (hours > 17) {
					for (let i = 1; i < 8; i++) {
						let newTime = new Date(time + i * 86400000)
						this.$set(this.list[i - 1], 'children', [{
							label: '9:00~12:00',
							value: '9:00~12:00'
						}, {
							label: '13:00~18:00',
							value: '13:00~18:00'
						}, {
							label: '18:00~22:00',
							value: '18:00~22:00'
						}])
						this.$set(this.list[i - 1], 'value', newTime.getFullYear() + '-' + (newTime.getMonth() + 1) + '-' +
							newTime.getDate())
					}
				} else {
					for (let i = 0; i < 7; i++) {
						let newTime = new Date(time + i * 86400000)
						if (hours > 12 && hours < 18 && i == 0) {
							this.$set(this.list[i], 'children', [{
								label: '13:00~18:00',
								value: '13:00~18:00'
							}, {
								label: '18:00~22:00',
								value: '18:00~22:00'
							}])

						} else if (hours > 18 && hours < 22 && i == 0) {
							this.$set(this.list[i], 'children', [{
								label: '18:00~22:00',
								value: '18:00~22:00'
							}])
						} else if (hours < 12 || i > 0) {
							this.$set(this.list[i], 'children', [{
								label: '9:00~12:00',
								value: '9:00~12:00'
							}, {
								label: '13:00~18:00',
								value: '13:00~18:00'
							}, {
								label: '18:00~22:00',
								value: '18:00~22:00'
							}])
						}
						this.$set(this.list[i], 'label', newTime.getFullYear() + '-' + (newTime.getMonth() + 1) + '-' +
							newTime.getDate())
					}
				}
				// this.list.forEach((item)=>{
				// 	item.label = item.value;
				// 	item.children.forEach(it=>{
				// 		it.label = it.value;
				// 	})
				// })
				// this.doorList = [];
				this.doorList = this.list;
			},
			confirm(e) {
				this.visitTimeList = e;
				this.point = false
			},
			activeEvent(val, val2) {
				this.activeNum = val;
				this.activeName = this.classList[val].name
				this.typeStatus = false;
				this.guaranList.maintain_type = val2;
			},
			skip1() {
				uni.redirectTo({
					url: "/privateMsg/clap/resLIst?type=公区报修"
				});
			},
			guaranBtn() {
				this.guaranList.user_id = uni.getStorageSync('rawData').userId
				this.guaranList.uuid = uni.getStorageSync('uuid')
				this.guaranList.org_id = uni.getStorageSync('projectItem').orgId

				if (!this.activeName) {
					uni.showToast({
						title: '请填写报修类型',
						duration: 2000,
						icon: 'error'
					});
					return
				}
				if (!this.guaranList.repairs_info) {
					uni.showToast({
						title: '请填写报修说明',
						duration: 2000,
						icon: 'error'
					});
					return
				}
				if (!this.radio == 1) {
					uni.showToast({
						title: '请同意协议',
						duration: 2000,
						icon: 'error'
					});
					return
				}
				//1 app 2 小程序
				this.guaranList.typeStatus=2
				this.guaranList.repairs_appointment_time = this.visitTimeList.length>0 ? this.visitTimeList[0].label +' '+this.visitTimeList[1].label:null
				this.$request.api.addRepair(this.guaranList).then(res => {
					if (res.data.status == 200) {
						this.guaranList = {
							mobile: null,
							maintain_type: null,
							room_id: null,
							repairs_appointment_time: null,
							repairs_info: null,
							repairs_picture: [],
							pro_id: null,
						}
						this.activeNum = null;
						uni.showModal({
							title: '提示',
							content: '提交成功,是否跳转报修列表!',
							success: function(res) {
								uni.navigateBack({
									url: '/pages/repairList/repairList'
								})
							}
						});
					} else {
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'error',
							duration: 3000,
						})
					}
				});

			},
			colseImg(val) {
				this.guaranList.repairs_picture.splice(val, 1)
				if (this.guaranList.repairs_picture.length == 0) {
					this.imgFlag = true
				}
			},
			// 选择图片
			uoloadHouse() {
				let that = this
				let images = [];
				uni.chooseMedia({
				  count: 3,
				  mediaType: ['image','video'],
				  sourceType: ['album', 'camera'],
				  maxDuration: 30,
				  camera: 'back',
				  success(res) {
						for (let i = 0; i < res.tempFiles.length; i++) {
							pathToBase64(res.tempFiles[i].tempFilePath).then(res => {
								uni.request({
									url: 'https://admin.515f.com/api/weixin/applet/base64_to_image_url',
									method: 'POST',
									data: {
										imageBase64: res
									},
									success: res2 => {
										that.guaranList.repairs_picture.push(res2.data
											.data);
										uni.hideLoading();
									}
								})
							})
						}
				  }
				})
				return;
				
				uni.chooseImage({
					count: 3, //默认9
					success(res) {
						uni.showLoading({
							title: '上传中'
						});
						images = res.tempFilePaths || []
						if (images.length > 0) {
							for (let i = 0; i < images.length; i++) {
								pathToBase64(images[i]).then(res => {
									uni.request({
										url: 'https://admin.515f.com/api/weixin/applet/base64_to_image_url',
										method: 'POST',
										data: {
											imageBase64: res
										},
										success: res2 => {
											that.guaranList.repairs_picture.push(res2.data
												.data);
											uni.hideLoading();
										}
									})
								})
							}
						}
					}
				})
			},
			//跳转协议
			toMent() {
				plus.runtime.openURL('https://s.515f.com/#/pages/model/details?id=FB202302097643011')
			},
		}
	}
</script>

<style lang="scss">
	.guarantee{
		.guar-class-box {
			height: 68rpx;
			border-radius: 34rpx;
			text-align: center;
			line-height: 68rpx;
			border: 2rpx solid #ccc;
			color: #999;
			padding-left: 10px;
			padding-right: 10px;

			&:nth-child(3n) {
				margin-right: 0 !important;
			}
		}
		.post_text {
			flex: 1;
			margin-left: 80rpx;
			height: 66rpx;
			background: #FFFFFF;
			border-radius: 100rpx 0px 0px 100rpx;
			line-height: 66rpx;
			text-align: center;
			font-weight: 500;
			color: #ffffff;
			background: linear-gradient(180deg, #76D904 0%, #417505 100%);
			font-size: 15px;
			font-weight: 600;
			width: 200rpx;
			max-height: 130upx;
			overflow: hidden;
			word-break: break-all;
			/* break-all(允许在单词内换行。) */
			text-overflow: ellipsis;
			/* 超出部分省略号 */
			display: -webkit-box;
			/** 对象作为伸缩盒子模型显示 **/
			-webkit-box-orient: vertical;
			/** 设置或检索伸缩盒对象的子元素的排列方式 **/
			-webkit-line-clamp: 1;
			/** 显示的行数 **/
		}

		.guar-class-box-active {
			border-color: #FEEED6;
			background: #FEEED6;
			color: #F9A832;
		}

		.guar-back-f {
			width: 92%;
			border: 0.5px solid #f4f4f4;
			margin: auto;
		}

		.guar-text textarea {
			width: 100%;
			height: 80px;
			// background: #F2F3F5;
			padding: 16rpx 20rpx !important;
			box-sizing: border-box;
		}

		.guarn-box {
			width: 100%;
			height: 216rpx;
		}

		.guarn-box2 {
			display: flex;
		}
		.guarn-box2-img {
			width: 216rpx;
			height: 216rpx;
			margin-right: 20rpx;
			position: relative;
			.guarn-box2-img-close {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
			}
		}
		.guarn-box2 image {
			width: 216rpx;
			height: 216rpx;
		}
		.guarn-box-img {
			width: 216rpx;
			height: 216rpx;
			float: left;
			margin-right: 24rpx;
			text-align: center;
			border: 2rpx solid #ccc;
			border-radius: 4rpx;
		}
		.guarn-box-img image {
			width: 76rpx;
			height: 68rpx;
		}
		.guarn-box-txt {
			color: #999;
			float: left;
		}
		.guar-txt-time {
			float: right;
			text-align: right;
			width: 420rpx;
		}
		.custom-style {
			color: #F9AF3A;
		}
		.bill-deta-btn {
			width: 100%;
			padding-bottom: 20px;

			.pay {
				background: #ff9900 !important;
				color: #fff;
			}
			.yilingqu {
				width: 80%;
				height: 84rpx;
				background: linear-gradient(180deg, #76D904 0%, #417505 100%);
				border-radius: 44rpx;
				line-height: 84rpx;
				color: white;
				text-align: center;
				font-size: 32rpx;
			}
			.guar-back-w i {
				width: 6px;
				height: 16px;
				background: linear-gradient(180deg, #76D904 0%, #417505 100%);
				border-radius: 4px;
				display: inline-block;
				vertical-align: middle;
				margin-top: -3px;
			}
		}
		.uni-textarea-placeholder {
			color: #999;
			overflow: hidden;
			font-size: 12px;
		}
		.repair-time-box{
			display:flex;
			justify-content:space-between;
		}
		.repair-time{
			width: 8px;
			height:8px;
			margin-top: 2px;
			margin-left: 9px
		} 
	}
</style>